<template>
  <div
      class="main-dialog"
      ref="dialogRef"
      :style="{
      left: position.x + 'px',
      top: position.y + 'px',
      transform: 'none'
    }"
  >
    <div class="dialog-header" ref="dragHandle">
      <h2 class="dialog-title">{{ title }}</h2>
      <button class="dialog-close" @click="closeDialog">
        <i class="icon-close"></i>
      </button>
    </div>

    <div class="dialog-tabs-container">
      <button
          class="scroll-button left"
          @click="scrollTabs(-100)"
          :disabled="isScrollLeftDisabled"
      >
        <i class="icon-arrow-left"></i>
      </button>
      <div class="dialog-tabs" ref="tabsContainer" @scroll="handleScroll">
        <button
            v-for="tab in tabs"
            :key="tab.id"
            :class="['tab-button', { 'active': activeTab === tab.id }]"
            @click="activeTab = tab.id"
        >
          <i :class="tab.icon"></i>
          <span class="tab-label">{{ tab.label }}</span>
        </button>
      </div>
      <button
          class="scroll-button right"
          @click="scrollTabs(100)"
          :disabled="isScrollRightDisabled"
      >
        <i class="icon-arrow-right"></i>
      </button>
    </div>
    <div class="dialog-content">
      <div v-if="activeTab === 'storage'" class="tab-panel">
        <StorageManager />
      </div>
      <div v-if="activeTab === 'elements'" class="tab-panel">
        <ElementInspector />
      </div>
      <div v-if="activeTab === 'console'" class="tab-panel">
        <ConsolePanel />
      </div>
      <div v-if="activeTab === 'network'" class="tab-panel">
        <NetworkMonitor />
      </div>
      <div v-if="activeTab === 'CodeExecutor'" class="tab-panel">
        <CodeExecutor/>
      </div>
      <div v-if="activeTab === 'DomSearch'" class="tab-panel">
        <DomSearch/>
      </div>
      <div v-if="activeTab === 'ElementSelector'" class="tab-panel">
        <ElementSelector/>
      </div>
      <div v-if="activeTab === 'HtmlActions'" class="tab-panel">
        <HtmlActions/>
      </div>
    </div>
  </div>
</template>

<script>
import { onBeforeUnmount, onMounted, ref, computed } from 'vue'
import StorageManager from './StorageManager.vue'
import ElementInspector from './ElementInspector.vue'
import ConsolePanel from './ConsolePanel.vue'
import NetworkMonitor from './NetworkMonitor.vue'
import CodeExecutor from "@/components/CodeExecutor.vue"
import DomSearch from "@/components/DomSearch.vue"
import ElementSelector from "@/components/ElementSelector.vue"
import HtmlActions from "@/components/HtmlActions.vue"

export default {
  components: {
    HtmlActions,
    ElementSelector,
    DomSearch,
    CodeExecutor,
    StorageManager,
    ElementInspector,
    ConsolePanel,
    NetworkMonitor
  },
  props: {
    title: {
      type: String,
      default: '开发者工具'
    },
    initialPosition: {
      type: Object,
      default: () => ({ x: 'center', y: 'center' })
    }
  },
  setup(props, { emit }) {
    const dialogRef = ref(null)
    const dragHandle = ref(null)
    const position = ref({ x: 0, y: 0 })
    const isDragging = ref(false)
    const dragStart = ref({ x: 0, y: 0 })
    const activeTab = ref('storage')
    const tabsContainer = ref(null)
    const scrollPosition = ref(0)
    const maxScroll = ref(0)

    const tabs = [
      { id: 'storage', label: '存储管理', icon: 'icon-storage' },
      { id: 'elements', label: '元素检查', icon: 'icon-elements' },
      { id: 'console', label: '控制台', icon: 'icon-console' },
      { id: 'network', label: '网络监控', icon: 'icon-network' },
      { id: 'CodeExecutor', label: '代码执行器', icon: 'icon-code' },
      { id: 'DomSearch', label: 'DOM搜索', icon: 'icon-search' },
      { id: 'ElementSelector', label: '元素选择器', icon: 'icon-selector' },
      { id: 'HtmlActions', label: 'HTML操作', icon: 'icon-html' },
    ]

    const isScrollLeftDisabled = computed(() => scrollPosition.value <= 0)
    const isScrollRightDisabled = computed(() => scrollPosition.value >= maxScroll.value)

    const initPosition = () => {
      const savedPos = localStorage.getItem('devtools-dialog-position')
      if (savedPos) {
        position.value = JSON.parse(savedPos)
      } else if (props.initialPosition.x === 'center' || props.initialPosition.y === 'center') {
        position.value = {
          x: window.innerWidth / 2 -400,
          y: window.innerHeight / 2 -300
        }
      } else {
        position.value = { ...props.initialPosition }
      }
    }

    const startDrag = (e) => {
      if (e.button !== 0) return
      isDragging.value = true
      dragStart.value = {
        x: e.clientX - position.value.x,
        y: e.clientY - position.value.y
      }
      document.addEventListener('mousemove', onDrag)
    }

    const onDrag = (e) => {
      if (!isDragging.value) return
      position.value = {
        x: e.clientX - dragStart.value.x,
        y: e.clientY - dragStart.value.y
      }
      constrainToWindow()
    }

    const stopDrag = () => {
      if (!isDragging.value) return
      isDragging.value = false
      document.removeEventListener('mousemove', onDrag)
      localStorage.setItem('devtools-dialog-position', JSON.stringify(position.value))
    }

    const constrainToWindow = () => {
      if (!dialogRef.value) return
      const rect = dialogRef.value.getBoundingClientRect()

      if (position.value.x < 0) position.value.x = 0
      if (position.value.y < 0) position.value.y = 0
      if (position.value.x + rect.width > window.innerWidth) {
        position.value.x = window.innerWidth - rect.width
      }
      if (position.value.y + rect.height > window.innerHeight) {
        position.value.y = window.innerHeight - rect.height
      }
    }

    const closeDialog = () => {
      emit('close')
    }

    const scrollTabs = (amount) => {
      if (tabsContainer.value) {
        tabsContainer.value.scrollBy({
          left: amount,
          behavior: 'smooth'
        })
      }
    }

    const handleScroll = () => {
      if (tabsContainer.value) {
        scrollPosition.value = tabsContainer.value.scrollLeft
        maxScroll.value = tabsContainer.value.scrollWidth - tabsContainer.value.clientWidth
      }
    }

    onMounted(() => {
      initPosition()
      dragHandle.value.addEventListener('mousedown', startDrag)
      document.addEventListener('mouseup', stopDrag)
      if (tabsContainer.value) {
        maxScroll.value = tabsContainer.value.scrollWidth - tabsContainer.value.clientWidth
      }
    })

    onBeforeUnmount(() => {
      dragHandle.value.removeEventListener('mousedown', startDrag)
      document.removeEventListener('mouseup', stopDrag)
      document.removeEventListener('mousemove', onDrag)
    })

    return {
      dialogRef,
      dragHandle,
      position,
      activeTab,
      tabs,
      tabsContainer,
      closeDialog,
      scrollTabs,
      handleScroll,
      isScrollLeftDisabled,
      isScrollRightDisabled
    }
  }
}
</script>

<style scoped>
.main-dialog {
  position: fixed;
  z-index: 1000001;
  pointer-events: auto;
  --primary-color: #00ff87;
  --secondary-color: #ff1f71;
  --accent-color: #60efff;
  --bg-dark: rgba(10, 20, 30, 0.95);
  --bg-light: rgba(255, 255, 255, 0.1);
  --text-primary: rgba(255, 255, 255, 0.9);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --border-color: rgba(255, 255, 255, 0.2);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 800px;
  max-width: 90vw;
  height: 600px;
  max-height: 90vh;
  background: var(--bg-dark);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--border-color);
  cursor: move;
}

.dialog-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dialog-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.dialog-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  transform: rotate(90deg);
}

.dialog-tabs-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.scroll-button {
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 1;
}

.scroll-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.scroll-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.dialog-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  scroll-behavior: smooth;
}

.dialog-tabs::-webkit-scrollbar {
  display: none;
}

.tab-button {
  flex: 0 0 auto;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.tab-button:hover {
  background: rgba(255, 255, 255, 0.05);
}

.tab-button.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.dialog-content {
  flex: 1;
  overflow: hidden;
  display: flex;
}

.tab-panel {
  flex: 1;
  overflow: auto;
  padding: 15px;
}

.icon-close,
.icon-storage,
.icon-elements,
.icon-console,
.icon-network,
.icon-code,
.icon-search,
.icon-selector,
.icon-html,
.icon-arrow-left,
.icon-arrow-right {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.icon-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12' /%3E%3C/svg%3E");
}

.icon-storage {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5z' /%3E%3C/svg%3E");
}

.icon-elements {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z' /%3E%3C/svg%3E");
}

.icon-console {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z' /%3E%3C/svg%3E");
}

.icon-network {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' /%3E%3C/svg%3E");
}

.icon-code {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4' /%3E%3C/svg%3E");
}

.icon-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' /%3E%3C/svg%3E");
}

.icon-selector {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E");
}

.icon-html {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z' /%3E%3C/svg%3E");
}

.icon-arrow-left {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7' /%3E%3C/svg%3E");
}

.icon-arrow-right {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7' /%3E%3C/svg%3E");
}

@media (max-width: 768px) {
  .tab-button {
    padding: 12px;
  }

  .tab-label {
    max-width: 80px;
  }
}
</style>
